<template>
  <div class="slider">
    <van-slider
      v-model="value"
      bar-height="5px"
      :step="0.1"
      :min="0"
      :max="100"
      active-color="#f44"
    >
      <div
        slot="button"
        class="custom-button"
      >
      </div>
    </van-slider>
  </div>
</template>

<script>
export default {
  props: {
    percent: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      value: this.percent*100
    }
  },
  created() {
    console.log(this.value)
  },
  watch: {
    value(newVal) {
      this.$emit('click', newVal)
    },
    // percent(newVal) {
    //   this.value = newVal
    // }
  }
}
</script>

<style lang="stylus" scoped>
  .slider 
    width 100% 
    .custom-button 
      width 14px 
      height 14px 
      border 1px solid #e02828
      border-radius 50% 
      position relative 
      background #fff 
      &::after 
        content: ''
        position absolute 
        display block 
        width 10px 
        height 10px 
        border-radius 50%
        background #e02828 
        left 50%
        top 50% 
        transform translate(-50%, -50%)


</style>